<template>
    <div>
        <h2>watch</h2>
        <!-- 
          作用：监听data中的数据改变


         -->
         <h3>{{num}}</h3>
         <h2 v-if="show">显示</h2>
          <button @click="add">点击</button>
    </div>
</template>

<script>
export default {
      data(){
        return{
            num:1,
            show:true,
            nums:100,
            obj:{
                a:100,
                f:10,
               c:{
                a:1000
               }
            }


        }
      },
      watch:{
        //watch 写法1 组件首次渲染到浏览器中不执行
        // 注意watch的属性=》你监听data中的那个属性，就是这个属性
        num:function(NewVal,oldVal){// 这个方法有两个参数  参数1 新的数据  参数2 旧的数据
           console.log(NewVal,oldVal);

           //业务逻辑处理
           if(NewVal==10){
               this.show=false
           }
          

        },
        // 写法2 如果你在工作，页面第一次显示的时候 ，写成对象的形式添加一个属性immediate
        nums:{
            handler(NewVal,oldVal){
              console.log(NewVal,oldVal);
            },
            // 配置项
            immediate:true
        },
        //写法3：我需要监听 obj.a 数据
        // obj(NewVal,oldVal){
        //      console.log(NewVal,oldVal);
        // }
        "obj.a":{
            handler(NewVal,oldVal){
              console.log(NewVal,oldVal);
            },
            deep:true //深度监听
        }
      },
      methods:{
        add(){
            // this.num  = this.num+1

            this.obj.a =1001 //修改了 obj数据
        }
      }
}
</script>

<style>

</style>